<template>
	<div class="business-home">
		<!-- 顶部导航栏 -->
		<header>
			<div class="header-left">
				<i class="fa fa-bars" @click="toggleMenu"></i>
				<h1>{{ business.businessName }} - 商家中心</h1>
			</div>
			<div class="header-right">
				<span>您好，{{ business.businessName }}</span>
				<button @click="logout">退出登录</button>
			</div>
		</header>

		<!-- 侧边栏菜单 -->
		<div class="sidebar" :class="{ 'sidebar-collapsed': isMenuCollapsed }">
			<div class="sidebar-header">
				<img :src="business.businessImg || defaultLogo" alt="商家logo" class="business-logo">
				<h3 v-show="!isMenuCollapsed">{{ business.businessName }}</h3>
			</div>

			<ul class="menu">
				<li :class="{ active: activeMenu === 'dashboard' }" @click="activeMenu = 'dashboard'">
					<i class="fa fa-home"></i>
					<span v-show="!isMenuCollapsed">概览</span>
				</li>
				<li :class="{ active: activeMenu === 'food' }" @click="navigateToFoodManage">
					<i class="fa fa-cutlery"></i>
					<span v-show="!isMenuCollapsed">商品管理</span>
				</li>
				<li :class="{ active: activeMenu === 'business' }" @click="navigateToBusinessInfo">
					<i class="fa fa-building"></i>
					<span v-show="!isMenuCollapsed">店铺信息</span>
				</li>
				<li :class="{ active: activeMenu === 'analysis' }" @click="activeMenu = 'analysis'">
					<i class="fa fa-line-chart"></i>
					<span v-show="!isMenuCollapsed">数据分析</span>
				</li>
			</ul>
		</div>

		<!-- 主内容区 -->
		<main :class="{ 'main-collapsed': isMenuCollapsed }">
			<!-- 概览卡片 -->
			<div class="overview-cards">
				<div class="card">
					<div class="card-icon" style="background-color: #4CAF50;">
						<i class="fa fa-shopping-cart"></i>
					</div>
					<div class="card-content">
						<h3>今日订单</h3>
						<p>{{ todayOrders }} 单</p>
					</div>
				</div>

				<div class="card">
					<div class="card-icon" style="background-color: #2196F3;">
						<i class="fa fa-money"></i>
					</div>
					<div class="card-content">
						<h3>今日销售额</h3>
						<p>¥{{ todaySales.toFixed(2) }}</p>
					</div>
				</div>

				<div class="card">
					<div class="card-icon" style="background-color: #FF9800;">
						<i class="fa fa-cutlery"></i>
					</div>
					<div class="card-content">
						<h3>商品数量</h3>
						<p>{{ foodCount }} 个</p>
					</div>
				</div>

				<div class="card">
					<div class="card-icon" style="background-color: #E91E63;">
						<i class="fa fa-star"></i>
					</div>
					<div class="card-content">
						<h3>店铺评分</h3>
						<p>{{ businessRating }} 分</p>
					</div>
				</div>
			</div>

			<!-- 最新订单 -->
			<div class="recent-orders">
				<h2><i class="fa fa-list"></i> 最近订单</h2>
				<table>
					<thead>
						<tr>
							<th>订单号</th>
							<th>时间</th>
							<th>金额</th>
							<th>状态</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="order in recentOrders" :key="order.orderId">
							<td>{{ order.orderId }}</td>
							<td>{{ formatDate(order.orderDate) }}</td>
							<td>¥{{ order.orderTotal.toFixed(2) }}</td>
							<td :class="getStatusClass(order.orderState)">
								{{ getStatusText(order.orderState) }}
							</td>
						</tr>
					</tbody>
				</table>
			</div>

			<!-- 快捷操作 -->
			<div class="quick-actions">
				<h2><i class="fa fa-bolt"></i> 快捷操作</h2>
				<div class="actions-grid">
					<div class="action-item" @click="navigateToFoodEdit">
						<i class="fa fa-plus-circle"></i>
						<span>添加新商品</span>
					</div>
					<div class="action-item" @click="navigateToBusinessInfo">
						<i class="fa fa-pencil"></i>
						<span>修改店铺信息</span>
					</div>
					<div class="action-item" @click="navigateToFoodManage">
						<i class="fa fa-refresh"></i>
						<span>更新商品信息</span>
					</div>
					<div class="action-item">
						<i class="fa fa-bell"></i>
						<span>通知公告</span>
					</div>
				</div>
			</div>
		</main>
	</div>
</template>

<script>
	import defaultLogo from '@/assets/default_business.png';

	export default {
		name: 'BusinessHome',
		data() {
			return {
				isMenuCollapsed: false,
				activeMenu: 'dashboard',
				business: {
					businessId: 0,
					businessName: '',
					businessImg: '',
				},
				todayOrders: 12,
				todaySales: 2568.50,
				foodCount: 28,
				businessRating: 4.8,
				recentOrders: [],
				defaultLogo
			}
		},
		created() {
			this.loadBusinessInfo();
			this.loadRecentOrders();
		},
		methods: {
			toggleMenu() {
				this.isMenuCollapsed = !this.isMenuCollapsed;
			},

			logout() {
				this.$removeSessionStorage('business');
				this.$router.push('/businessLogin');
			},

			navigateToFoodManage() {
				this.$router.push('/foodManage');
			},

			navigateToFoodEdit() {
				this.$router.push('/foodEdit');
			},

			navigateToOrders() {
				this.$router.push('/businessOrders');
			},

			navigateToBusinessInfo() {
				this.$router.push({
					path: '/businessInfoEdit',
					query: {
						businessId: this.business.businessId
					}
				});
			},

			async loadBusinessInfo() {
				const business = this.$getSessionStorage('business');
				if (!business) {
					this.$router.push('/businessLogin');
					return;
				}

				this.business = business;

				// 加载商家详细信息
				try {
					const response = await this.$axios.post(
						'BusinessController/getBusinessById',
						this.$qs.stringify({
							businessId: business.businessId
						})
					);
					this.business = {
						...this.business,
						...response.data
					};
				} catch (error) {
					console.error('加载商家信息失败:', error);
				}
			},

			async loadRecentOrders() {
				try {
					const response = await this.$axios.post(
						'OrdersController/listOrdersByBusinessId',
						this.$qs.stringify({
							businessId: this.business.businessId
						})
					);
					// 取最近的5个订单
					this.recentOrders = response.data.slice(0, 5);
				} catch (error) {
					console.error('加载订单失败:', error);
					this.recentOrders = [];
				}
			},

			formatDate(dateString) {
				const date = new Date(dateString);
				return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
			},

			getStatusText(status) {
				const statusMap = {
					0: '未支付',
					1: '已支付',
					2: '已接单',
					3: '配送中',
					4: '已完成',
					5: '已取消'
				};
				return statusMap[status] || '未知状态';
			},

			getStatusClass(status) {
				const classMap = {
					0: 'status-unpaid',
					1: 'status-paid',
					2: 'status-accepted',
					3: 'status-delivering',
					4: 'status-completed',
					5: 'status-canceled'
				};
				return classMap[status] || '';
			}
		}
	}
</script>

<style scoped>
	.business-home {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f5f6fa;
		font-family: 'Microsoft YaHei', sans-serif;
	}

	/* 头部样式 */
	header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20px;
		height: 60px;
		background-color: #2c3e50;
		color: white;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
	}

	.header-left {
		display: flex;
		align-items: center;
		gap: 15px;
	}

	.header-left i {
		font-size: 20px;
		cursor: pointer;
	}

	.header-left h1 {
		font-size: 18px;
		font-weight: 500;
	}

	.header-right {
		display: flex;
		align-items: center;
		gap: 15px;
	}

	.header-right button {
		background-color: #e74c3c;
		color: white;
		border: none;
		padding: 6px 12px;
		border-radius: 4px;
		cursor: pointer;
		transition: background-color 0.3s;
	}

	.header-right button:hover {
		background-color: #c0392b;
	}

	/* 侧边栏样式 */
	.sidebar {
		width: 250px;
		background: #34495e;
		color: white;
		height: calc(100vh - 60px);
		position: fixed;
		top: 60px;
		left: 0;
		overflow-y: auto;
		transition: width 0.3s;
		z-index: 999;
	}

	.sidebar-collapsed {
		width: 60px;
	}

	.sidebar-header {
		padding: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		border-bottom: 1px solid #2c3e50;
	}

	.business-logo {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		object-fit: cover;
		border: 3px solid #3498db;
	}

	.menu {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.menu li {
		padding: 15px 20px;
		display: flex;
		align-items: center;
		gap: 15px;
		cursor: pointer;
		transition: background-color 0.3s;
	}

	.menu li:hover {
		background-color: #2c3e50;
	}

	.menu li.active {
		background-color: #3498db;
	}

	.menu li i {
		font-size: 18px;
		width: 24px;
		text-align: center;
	}

	/* 主内容区样式 */
	main {
		margin-left: 250px;
		margin-top: 60px;
		padding: 20px;
		transition: margin-left 0.3s;
		overflow-y: auto;
		height: calc(100vh - 60px);
	}

	.main-collapsed {
		margin-left: 60px;
	}

	/* 概览卡片 */
	.overview-cards {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
		gap: 20px;
		margin-bottom: 30px;
	}

	.card {
		background: white;
		border-radius: 8px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
		padding: 20px;
		display: flex;
		align-items: center;
		transition: transform 0.3s;
	}

	.card:hover {
		transform: translateY(-5px);
	}

	.card-icon {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 15px;
		color: white;
		font-size: 24px;
	}

	.card-content h3 {
		font-size: 16px;
		color: #7f8c8d;
		margin-bottom: 5px;
	}

	.card-content p {
		font-size: 24px;
		font-weight: bold;
		color: #2c3e50;
	}

	/* 最近订单 */
	.recent-orders {
		background: white;
		border-radius: 8px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
		padding: 20px;
		margin-bottom: 30px;
	}

	.recent-orders h2 {
		font-size: 18px;
		margin-bottom: 15px;
		color: #2c3e50;
		display: flex;
		align-items: center;
		gap: 10px;
	}

	table {
		width: 100%;
		border-collapse: collapse;
	}

	th,
	td {
		padding: 12px 15px;
		text-align: left;
		border-bottom: 1px solid #eee;
	}

	th {
		background-color: #f8f9fa;
		color: #7f8c8d;
		font-weight: 500;
	}

	tbody tr:hover {
		background-color: #f8f9fa;
	}

	.status-unpaid {
		color: #e74c3c;
		font-weight: 500;
	}

	.status-paid {
		color: #3498db;
		font-weight: 500;
	}

	.status-accepted {
		color: #f39c12;
		font-weight: 500;
	}

	.status-delivering {
		color: #9b59b6;
		font-weight: 500;
	}

	.status-completed {
		color: #27ae60;
		font-weight: 500;
	}

	.status-canceled {
		color: #95a5a6;
		font-weight: 500;
	}

	/* 快捷操作 */
	.quick-actions {
		background: white;
		border-radius: 8px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
		padding: 20px;
	}

	.quick-actions h2 {
		font-size: 18px;
		margin-bottom: 15px;
		color: #2c3e50;
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.actions-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 20px;
	}

	.action-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 25px 15px;
		background: #f8f9fa;
		border-radius: 8px;
		cursor: pointer;
		transition: all 0.3s;
		border: 1px solid #eee;
	}

	.action-item:hover {
		transform: translateY(-3px);
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
		border-color: #3498db;
	}

	.action-item i {
		font-size: 32px;
		color: #3498db;
		margin-bottom: 10px;
	}

	.action-item span {
		font-size: 16px;
		color: #2c3e50;
		font-weight: 500;
	}
</style>